<template>
  <div v-if="show" class="mask" @keydown.esc="close">
    <video :src="videoURL" controls autoplay muted width="60%"></video>
    <div class="close el-icon-close" @click="close"></div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    videoURL: {
      type: String,
      required: true
    }
  },
  // mounted () {
  //   this.$nextTick(() => {
  //     const body = document.querySelector('body')
  //     if (body.append) {
  //       body.append(this.$el)
  //     } else {
  //       body.appendChild(this.$el)
  //     }
  //   })
  // },
  methods: {
    close () {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="less" scoped>
.mask {

  position: fixed;
  z-index: 999999999999;

  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-height: 75%;
  }
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 5%;
    left: 50%;
    margin-left: -25px;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    cursor: pointer;
    &::before {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>
